<template>
  <div>
    <el-divider content-position="left">血糖记录</el-divider>
    <el-table size="small" :data="state.dataList" v-loading="state.loading" border
              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
              @sort-change="sortChangeHandle">
      <!--      <el-table-column label="血糖记录" center>-->
      <el-table-column type="index" label="#" width="50"/>
      <el-table-column prop="detectionTime" label="检测时间" show-overflow-tooltip/>
      <el-table-column prop="isFasting" label="空腹状态" show-overflow-tooltip>
        <template #default="scope">
<!--          <dict-tag :options="bloodx_fasting" :value="scope.row.isFasting"></dict-tag>-->
          <el-tag v-if="scope.row.isFasting === 0" >空腹</el-tag>
          <el-tag v-if="scope.row.isFasting === 1" type="warning">餐后</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="血糖值" show-overflow-tooltip/>
      <!--      </el-table-column>-->
    </el-table>
    <pagination template-size="small" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                v-bind="state.pagination"/>

    <div ref="chart" style="height: 320px" class="w-full h-fill"/>
  </div>
</template>
<script setup lang="ts">
import {useDict} from '/@/hooks/dict';
import {BasicTableProps, useTable} from "/@/hooks/table";
import {medicalViewPage, medicalViewBloodStatisticalChart} from "/@/api/blood/bloodxCustomerBlood";
import * as echarts from 'echarts';
import {markRaw} from "vue";

const {bloodx_fasting} = useDict('bloodx_fasting');

const chart = ref(null);
const creatChart = ref(false)
const dataList = ref([])
const afterTheMealList = ref([])
const emptyStomachList = ref([])


const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: medicalViewPage,
  createdIsNeed: false,
  descs: ['update_time'],
})


const {
  getDataList,
  tableStyle,
  sortChangeHandle,
  currentChangeHandle,
  sizeChangeHandle,
} = useTable(state)


const setBloodChartsApi = async () => {
  await medicalViewBloodStatisticalChart({customerId: state.queryForm.customerId}).then((res: any) => {
    dataList.value = res.data.dataList;
    afterTheMealList.value = res.data.afterTheMealList;
    emptyStomachList.value = res.data.emptyStomachList;
  })
}

const setBloodCharts = () => {
  const option = {
    title: {
      text: "血糖记录统计图",
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      bottom: '10%',
      containLabel: true,
    },
    legend: {
      data: ['空腹', '餐后']
    },
    xAxis: {
      type: 'category',
      data: dataList.value,
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {interval: 0, rotate: 0}
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} mmol/L'
      }
    },
    series: [
      {
        name: '空腹',
        data: emptyStomachList.value,
        type: "bar",
        label: {
          show: true,
          position: 'top',
        },
        color: "#5c6bc0"
      },
      {
        name: '餐后',
        data: afterTheMealList.value,
        type: "bar",
        label: {
          show: true,
          position: 'top',
        },
        color: "#ffb562"
      },
    ],
  };

  setTimeout(() => {
    // 销毁之前的图表
    chart.value = markRaw(echarts.init(chart.value));
    chart.value.setOption(option);
    creatChart.value = true
  }, 100);
}

const getData = (val: any) => {
  state.queryForm.customerId = val.id
  if (state.queryForm.customerId) {
    getDataList()
    setBloodChartsApi().then(() => {
      setBloodCharts()
    })
  }
}

defineExpose({
  getData
})

onMounted(() => {
  setBloodCharts()
})

</script>

<style scoped lang="scss">

</style>
